<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$('#container').highcharts({
				chart: {
					type: 'area',
					spacingBottom: 30
				},
				title: {
					text: 'Fruit consumption *'
				},
				subtitle: {
					text: '* Jane\'s banana consumption is unknown',
					floating: true,
					align: 'right',
					verticalAlign: 'bottom',
					y: 15
				},
				legend: {
					layout: 'vertical',
					align: 'left',
					verticalAlign: 'top',
					x: 150,
					y: 100,
					floating: true,
					borderWidth: 1,
					backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
				},
				xAxis: {
					categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
				},
				yAxis: {
					title: {
						text: 'Y-Axis'
					},
					labels: {
						formatter: function () {
							return this.value;
						}
					}
				},
				tooltip: {
					formatter: function () {
						return '<b>' + this.series.name + '</b><br/>' +
								this.x + ': ' + this.y;
					}
				},
				plotOptions: {
					area: {
						fillOpacity: 0.5
					}
				},
				credits: {
					enabled: false
				},
				series: [{
					name: 'John',
					data: [0, 1, 4, 4, 5, 2, 3, 7]
				}, {
					name: 'Jane',
					data: [1, 0, 3, null, 3, 1, 2, 1]
				}]
			});
		});


	</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>
